<template>
  <div class="back-border" :style="backBorderStyle">
    <div class="corner top-left" :style="cornerStyle"></div>
    <div class="corner top-right" :style="cornerStyle"></div>
    <div class="corner bottom-left" :style="cornerStyle"></div>
    <div class="corner bottom-right" :style="cornerStyle"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backBorderStyle: {
        borderWidth: "3px",
        borderColor: "rgba(88,157,218,0.42)",
        borderStyle: "solid",
        ["--borderWidth"]: -1 - Math.max(3, propsJson.cornerWidth) + "px",
      },
      cornerStyle: {
        borderWidth: "0px",
        borderColor: "rgba(88,114,218,1)",
        width: "30px",
        height: "30px",
      },
    }
  },
}
</script>

<style scoped lang="less">
.back-border {
  width: 100%;
  height: 100%;
  position: relative;
}

.back-border .corner {
  position: absolute;
  border-style: solid;

  &.top-left {
    top: var(--borderWidth);
    left: var(--borderWidth);
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
  }

  &.top-right {
    top: var(--borderWidth);
    right: var(--borderWidth);
    border-left-color: transparent !important;
    border-bottom-color: transparent !important;
  }

  &.bottom-left {
    bottom: var(--borderWidth);
    left: var(--borderWidth);
    border-top-color: transparent !important;
    border-right-color: transparent !important;
  }

  &.bottom-right {
    bottom: var(--borderWidth);
    right: var(--borderWidth);
    border-left-color: transparent !important;
    border-top-color: transparent !important;
  }
}
</style>
